<template>
  <div>
    counter: {{ counter }}
    <div>
      <button @click="addOne">addOne</button>
      <button @click="addOneAndCommit">addOneAndCommit</button>
      <button @click="undo">undo</button>
      <button @click="redo">redo</button>
    </div>
    <div>
      <pre lang="json">
        {{ history }}
      </pre>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {useManualRefHistory} from "@vueuse/core";
const counter = ref(0)
const { history, commit, undo, redo } = useManualRefHistory(counter)

const addOne = () => counter.value += 1
const addOneAndCommit = () => {
  addOne()
  commit()
}
</script>
